<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const $route = useRoute()

interface Iprops {
  routeArr: any[]
}
const props = defineProps<Iprops>()

const curPath = ref<string>()

const MenuItemClickHandle = (item: any) => {
  curPath.value = item.name
  // 路由跳转
}
onMounted(() => {
  curPath.value = $route.name as string
})
</script>
<template>
  <div class="menu">
    <el-menu :default-active="curPath">
      <template v-for="item in props.routeArr" :key="item.path">
        <el-menu-item
          :index="`${item.path}`"
          @click="MenuItemClickHandle(item)"
        >
          <div
            :class="{
              // selected: $route.path == `/hospital/${item.path}`,
              selected: curPath == item.path,
              item
            }"
          >
            <icon-title></icon-title>
            <span>
              {{ item.meta.title }}
            </span>
          </div>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>
<style scoped lang="less">
.menu {
  :deep(.el-row) {
    margin: 0 !important;
    padding: 0 !important;
  }
  .el-menu {
    position: sticky;
  }
  .el-menu-item {
    &:hover {
      background: none;
      font-weight: 700;
      color: var(--text-hover-color);
    }

    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      .icon {
        color: #fff;
      }
    }
    .selected {
      font-weight: bold;
      font-size: 16px;
      color: var(--primary-color);
      .icon {
        color: inherit;
      }
    }
  }
}
</style>
